<template>
  <div class="pdt20">
    <van-cell-group inset>
      <van-cell :title="accountType[deviceInfo.Category] + '图片'">
        <template #value>
          <van-image
            v-for="(item, index) in deviceInfo.Pictrues"
            width="50px"
            height="50px"
            @click="
              showImagePreview({
                images: imageUrlList,
                startPosition: index,
                closeable: true
              })
            "
            :src="$addFileHead(item.Path)"
          />
        </template>
      </van-cell>

      <van-cell
        :title="accountType[deviceInfo.Category] + '编号'"
        :value="deviceInfo.Code"
      />
      <van-cell
        :title="accountType[deviceInfo.Category] + '名称'"
        :value="deviceInfo.Name"
      />
      <van-cell title="管理员" :value="$filterUserName(deviceInfo.Principal)" />
      <van-cell title="区域" :value="deviceInfo.Area" />
      <van-cell title="场地" :value="deviceInfo.Place" />
      <van-cell title="规格型号" :value="deviceInfo.Model" />
      <van-cell title="生产厂商" :value="deviceInfo.Manufacturer" />
      <van-cell title="入厂时间" :value="deviceInfo.FactoryTime" />
      <van-cell title="类别" :value="deviceInfo.Type" />

      <van-cell title="是否启用">
        {{ deviceInfo.Enable == 'Y' ? '启用' : '停用' }}
      </van-cell>
      <van-cell title="状况" v-if="deviceInfo.Category == 1">
        <el-tag effect="dark" :type="StateType[deviceInfo.State_Self]"
          >{{ TeacherDeviceState[deviceInfo.State_Self] }}
        </el-tag>
      </van-cell>
      <van-cell title="状况" v-if="deviceInfo.Category == 2">
        <el-tag effect="dark" :type="State_SelfType[deviceInfo.State_Self]"
          >{{ State_Self[deviceInfo.State_Self] }}
        </el-tag>
        <el-tag effect="dark" :type="StateType[deviceInfo.State]"
          >{{ OfficeDeviceState[deviceInfo.State] }}
        </el-tag>
      </van-cell>
      <van-cell
        title="IP地址"
        :value="deviceInfo.IPAddress"
        v-if="deviceInfo.Category == 1"
      />
      <van-cell title="应用范围" :value="deviceInfo.UseScope" />
    </van-cell-group>
  </div>
</template>

<script setup name="DeviceAccount">
import { useRoute } from 'vue-router';
import {
  category,
  checkType,
  accountType
} from '@/views/Amobile/DeviceManage/conmon.js';
import { GetDeviceDetail } from '@/api/teachDevice/account.js';
import defaultSettings from '@/settings';
import { showImagePreview } from 'vant';
import { getCurrentInstance, onMounted } from 'vue';

const { proxy } = getCurrentInstance();
const route = useRoute();
const deviceInfo = ref({});
const imageUrlList = ref([]);
const State_Self = {
  1: '正常',
  2: '降级',
  3: '报废'
};
const State_SelfType = {
  1: 'success',
  2: 'danger',
  3: 'info'
};
const TeacherDeviceState = {
  1: '正常运行',
  2: '保养中',
  3: '维修中',
  4: '使用中'
};
const OfficeDeviceState = {
  1: '在库',
  2: '检验中',
  3: '维修中',
  4: '使用中'
};
const StateType = {
  1: 'success',
  2: 'warning',
  3: 'danger',
  4: ''
};
onMounted(() => {
  getDetail();
});

async function getDetail() {
  try {
    let res = await GetDeviceDetail({ ID: route.query.DeviceID });
    deviceInfo.value = res.data.Info;
    deviceInfo.value.FactoryTime = deviceInfo.value.FactoryTime?.slice(0, 10);
    imageUrlList.value = deviceInfo.value.Pictrues?.map(item =>
      proxy.$addFileHead(item.Path)
    );
    document.title =
      accountType[deviceInfo.value.Category] + '台账' + ' - ' + defaultSettings.title;
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss" scoped></style>
